<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=utf-8>
<!-- simplified version; works on legacy browsers -->
<title>Basic styling of new structural tags</title>
<style> 
*{margin:0;padding:0;}
body {background-color:white; color: black; text-align:center;}
 
header, footer, nav, section, article {display:block;}
 
header {width:100%; background-color:yellow;}
 
nav {width:30%; background-color:orange;float:left;}
section {width:65%; background-color:SpringGreen ; float:right;}
article {width:70%; margin:2em 10%; background-color:turquoise;}
 
footer {width:100%; background-color:pink; clear:both;} 
</style>
 
 
<!--[if IE]>
<script>
(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
 
<body>
<header><h1>Hello</h1></header>
<nav><p>Menu</p></nav>
<section>
<p>Section</p>
    <article><p>article 1</p></article>
    <article><p>article 2</p></article>
</section>
<footer><p>The footer</p></footer>
</body>
</html>
